<template>
  <div class="tag-box ag-scrollbar" :class="{ tactive: isToggleTags }">
    <!-- <span @click="onToggleTags">切换
      <a-icon type="caret-down" />
    </span> -->
    <el-input
      v-if="inputVisible"
      ref="input"
      type="text"
      size="small"
      :style="{ width: '78px' }"
      v-model="inputValue"
      @blur="handleInputConfirm"
      @keyup.enter.native="(event) => event.target.blur()"
    />
    <el-tag v-else class="tagClose" @click="showInput"> + </el-tag>
    <template v-for="tag in tags">
      <el-tooltip v-if="tag.length > 6" :key="tag" :content="tag">
        <el-tag
          :key="tag"
          :closable="true"
          @close="() => handleClose(tag)"
          @click="searchTree(tag)"
        >
          {{ `${tag.slice(0, 6)}...` }}
        </el-tag>
      </el-tooltip>
      <template v-else>
        <el-tag
          :key="tag"
          :closable="true"
          @close="() => handleClose(tag)"
          @click="searchTree(tag)"
        >
          {{ tag }}
        </el-tag>
      </template>
    </template>
  </div>
</template>
<script>
import serverData from "@/views/js/api/imageDataApi";
import dirImageDataApi from "@/views/js/api/dirImageDataApi";

export default {
  data() {
    return {
      //标签
      tags: [],
      inputVisible: false,
      inputValue: "",
      curTagObj: {},
      isToggleTags: true,
      curId: "",
    };
  },
  created() {
    this.getTags();
  },
  methods: {
    searchTree(o) {
      this.$emit("searchTree", o);
    },
    async getTags() {
      let vm = this;
      let code = { code: "Agcim-LayerTreeTags" };
      let response = await dirImageDataApi.treeByCode(code);
      if (response.success && response.content.length > 0) {
        let obj = response.content.find((item) => {
          return item.imageStoreDirCode == "other-Agcim-LayerTreeTags";
        });
        vm.dirId = obj.imageStoreDirId;
      }
      let params = {
        dirId: vm.dirId,
        page: 1,
        rows: 1000,
        dirCode: "other-Agcim-LayerTreeTags",
      };
      let res = await serverData.selectAuthPageByDirCode(params);
      if (res.success) {
        let arr = res.content.list;
        if (arr.length > 0) {
          this.tags = JSON.parse(arr[0].imageStoreInformation);
          this.curId = arr[0].imageStoreId;
        }
      }
    },
    handleClose(removedTag) {
      const tags = this.tags.filter((tag) => tag !== removedTag);
      this.tags = tags;
      this.updateTags();
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(function () {
        this.$refs.input.focus();
      });
    },
    handleInputChange(e) {
      this.inputValue = e.target.value;
    },
    handleInputConfirm() {
      const inputValue = this.inputValue;
      let tags = this.tags;
      //如果没有输入任何内容
      if (!inputValue) {
        Object.assign(this, {
          tags,
          inputVisible: false,
          inputValue: "",
        });
        return;
      }
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
      }
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: "",
      });

      if (this.curId) {
        this.updateTags();
      } else {
        this.save();
      }
    },
    async updateTags() {
      let apiFieldList = {
        imageStoreDirId: this.dirId,
        imageStoreInformation: JSON.stringify(this.tags),
      };
      if (this.curId) apiFieldList.imageStoreId = this.curId;
      let res = await serverData.updateImageStore(apiFieldList);
      if (res.success) {
        this.$message.info(res.message);
      }
    },
    //切换
    onToggleTags() {
      this.isToggleTags = !this.isToggleTags;
    },
    async save() {
      let apiFieldList = {
        imageStoreName: "测试专题（自主）",
        imageStoreDirId: this.dirId,
        imageStoreInformation: JSON.stringify(this.tags),
      };
      let res = await serverData.saveImageStore(apiFieldList);
      if (res.success) {
        this.$message.success(res.message);
        this.updateTags();
        this.curId = res.content;
      }
    },
  },
};
</script>
<style scoped>
.tag-box.tactive .anticon {
  transform: rotate(-90deg);
}
.tag-box span {
  background: rgba(30, 144, 255, 0.4);
  border-radius: 4px;
  margin: 5px;
  color: #ffffff;
  border: none;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}
.tag-box ::v-deep.anticon-close {
  color: #ffffff;
}
.tagClose {
  /* background: #fff;
  margin: "2px 0px";
  border-style: dashed; */
  padding: 0 7px;
  font-size: 32px !important;
  line-height: 32px;
  background-color: #409eff !important;
  vertical-align: bottom;
}
.tag-box {
  max-height: 92px;
  padding: 5px 10px;
  background-color: rgba(1, 10, 23, 0.7);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 10px;
}
.tag-box.ag-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}
.tag-box ::v-deep input {
  height: 32px;
  margin-right: 5px;
}
.el-tag:hover {
  cursor: pointer;
}
</style>
